import React, { memo, useCallback, useEffect, useRef } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import { Carousel } from 'antd'

import Header from '@/components/header-rcm/header'
import AlbumCover from '@/components/album-cover/album-cover'
import { NewAlbumWrap } from './style'

import { getNewAlbums } from '@/api/discover/recommend'
import { changeNewAlbumsAction } from '@/pages/discover/children/recommend/store/actionCreators'
export default memo(function NewAlbum() {
    //ref
    const pageRef = useRef()

    //state
    // const [current, setCurrent] = useState(0)

    //Selector
    const { newAlbums } = useSelector(state => ({
        newAlbums:state.getIn(['recommend','newAlbums'])
    }),shallowEqual)
    console.log(newAlbums)
    //disatch
    const dispatch = useDispatch()

    //Effect
    useEffect(()=>{
        getNewAlbums().then(res=>{
            dispatch(changeNewAlbumsAction(res.albums))
        })
    },[dispatch])

    //callback
    const currentPrev = useCallback(()=>{
        pageRef.current.prev()
    },[pageRef])
    const currentNext = useCallback(()=>{
        pageRef.current.next()
    },[pageRef])

    
    return (
        <NewAlbumWrap>
            <Header title="新碟上架" />
            <div className="content">
                <button onClick={currentPrev} className="arrow-left sprite_02"></button>
                <div className="album">
                    <Carousel ref={pageRef} speed={1000} dots={false}>
                        {[0, 1].map((itemB, indey) => {
                            return (
                                <div className="page" key={itemB}>
                                    {
                                        newAlbums.slice(itemB*5,(itemB+1)*5).map((item,index) => {
                                            return (
                                                <AlbumCover
                                                    key={item.id}
                                                    info={item}
                                                    imgSize={100}
                                                    bgp={-570}
                                                />
                                            )
                                        })
                                    }
                                </div>
                            )
                        })}
                    </Carousel>
                </div>
                <button onClick={currentNext} className="arrow-right sprite_02"></button>
            </div>
        </NewAlbumWrap>
    )
})
